<template>
  <div id="app" class="app-container">
    <!-- 路由渲染 -->
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useSystemStore } from '@/stores/system'
import logger from '@/utils/logger'

const route = useRoute()
const systemStore = useSystemStore()

// 响应式断点监听
const handleResize = () => {
  systemStore.updateDeviceType()
  logger.debug('设备类型更新:', { 
    deviceType: systemStore.deviceType, 
    width: window.innerWidth 
  })
}

// 在线状态监听
const handleOnline = () => {
  systemStore.setOnlineStatus(true)
  logger.info('网络已连接')
}

const handleOffline = () => {
  systemStore.setOnlineStatus(false)
  logger.warn('网络已断开')
}

onMounted(() => {
  // 初始化系统状态
  systemStore.init()
  
  // 添加事件监听
  window.addEventListener('resize', handleResize)
  window.addEventListener('online', handleOnline)
  window.addEventListener('offline', handleOffline)
  
  logger.info('App组件已挂载', { 
    route: route.path
  })
})

onUnmounted(() => {
  // 清理事件监听
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('online', handleOnline)
  window.removeEventListener('offline', handleOffline)
  
  logger.info('App组件已卸载')
})
</script>

<style lang="scss">
// Apple Design System CSS Variables
:root {
  // Apple 间距系统
  --apple-spacing-xs: 4px;
  --apple-spacing-sm: 8px;
  --apple-spacing-md: 16px;
  --apple-spacing-lg: 24px;
  --apple-spacing-xl: 32px;
  --apple-spacing-xxl: 48px;

  // Apple 圆角系统
  --apple-radius-xs: 4px;
  --apple-radius-sm: 6px;
  --apple-radius-md: 8px;
  --apple-radius-lg: 12px;
  --apple-radius-xl: 16px;

  // Apple 背景色系统
  --apple-background-primary: #ffffff;
  --apple-background-secondary: #f9f9f9;
  --apple-background-tertiary: #f2f2f2;
  --apple-background-elevated: #ffffff;
  
  // Apple 文字色系统
  --apple-text-primary: #1d1d1f;
  --apple-text-secondary: #86868b;
  --apple-text-tertiary: #a1a1a6;
  
  // Apple 边框色系统
  --apple-border-primary: #d2d2d7;
  --apple-border-secondary: #e5e5ea;
  
  // Apple 阴影系统
  --apple-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --apple-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --apple-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --apple-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  // 兼容性别名
  --apple-shadow-light: var(--apple-shadow-sm);
  --apple-shadow-medium: var(--apple-shadow-md);

  // Apple 品牌色系统
  --apple-blue: #007AFF;
  --apple-green: #34C759;
  --apple-orange: #FF9500;
  --apple-red: #FF3B30;
  --apple-yellow: #FFCC00;
  --apple-purple: #AF52DE;
  --apple-pink: #FF2D92;
  --apple-teal: #5AC8FA;

  // 状态色系统
  --apple-success: var(--apple-green);
  --apple-warning: var(--apple-orange);
  --apple-error: var(--apple-red);
  --apple-info: var(--apple-blue);
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  :root {
    --apple-background-primary: #1c1c1e;
    --apple-background-secondary: #2c2c2e;
    --apple-background-tertiary: #3a3a3c;
    --apple-background-elevated: #2c2c2e;
    
    --apple-text-primary: #ffffff;
    --apple-text-secondary: #98989d;
    --apple-text-tertiary: #636366;
    
    --apple-border-primary: #38383a;
    --apple-border-secondary: #48484a;
  }
}

.app-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--apple-background-primary);
  transition: background-color 0.3s ease;
}

// 路由切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 全局样式重置
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
  overflow: hidden;
}

// 全局滚动条样式（Apple风格）
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  
  &:hover {
    background: rgba(0, 0, 0, 0.25);
  }
}

::-webkit-scrollbar-corner {
  background: transparent;
}

// 移动端适配
@media (max-width: 768px) {
  .app-container {
    padding: 0;
  }
  
  // 移动端隐藏滚动条
  ::-webkit-scrollbar {
    display: none;
  }
}
</style>